<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户后台 - 登录</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">

  <!-- jQuery -->
  <script src="/static/plugins/jquery-3.6.0.min.js"></script>
  <!-- Vue -->
  <script type="text/javascript" src="/static/plugins/vue.min.js"></script>
  <!-- Layer -->
  <script type="text/javascript" src="/static/plugins/layer/layer.js"></script>
  <!-- Bootstrap 4 -->
  <script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE App -->
  <script src="/static/dist/js/adminlte.min.js"></script>
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="javascript:void(0);"><b>用户</b>登录</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <form id="login_form">
        <div class="input-group mb-3">
          <input type="email" class="form-control" placeholder="账号" id="user" v-on:keyup.enter="login">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control" placeholder="密码" id="password" v-on:keyup.enter="login">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <button type="button" class="btn btn-primary btn-block" v-on:click="login">登录</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
      <script type="text/javascript">
        var login_loader = null;
        var login_form = new Vue({
          el: '#login_form',
          methods: {
            login: function () {
              var user = $('#user').val();
              var password = $('#password').val();
              if (user === '' || password === '') {
                layer.alert('账号和密码均不能为空', {icon: 0});
                return;
              } else if (user.indexOf('\'') !== -1 || user.indexOf('\"') !== -1) {
                layer.alert('账号不能包含引号', {icon: 0});
                return;
              } else if (user.length > 15 || password.length > 20) {
                layer.alert('账号不能超过15个字符，密码不能超过20个字符', {icon: 0});
                return;
              }
              login_loader = layer.load(1);
              $.ajax({
                url: 'user_login',
                type: 'post',
                data: {
                  user: user,
                  password: password
                },
                success: function (data) {
                  console.log(data);
                  layer.close(login_loader);
                  var result = data.split(':');
                  if (result.length !== 2) {
                    layer.alert('系统错误：返回非法值', {icon: 2});
                  } else {
                    var status = result[0];
                    if (status === 'fail') {
                      layer.alert('登录失败：' + result[1], {icon: 2});
                    } else {
                      location.href = 'copywrite_list';
                    }
                  }
                },
                error: function (data) {
                  layer.close(login_loader);
                  layer.alert('系统错误：服务器程序错误', {icon: 2});
                  console.error(data.responseText);
                }
              });
            }
          }
        });
      </script>
      <p class="mb-0">
        <a href="register" class="text-center">注册用户</a>
      </p>
    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->
</body>
</html>
